/****************
 *@description: 抖音数据看板
 *@author: Xhd
 *@date: 2023-09-08 09:39:32
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiGetThirdAdvertStatisticsPage, apiGetThirdAdvertStatisticsExport } from '@/request/dataBoard';
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import { exportSheetTable } from '@/utils/exportTable.js';
import _ from 'lodash';
import { getDateTime3 } from '@/utils/getDate'
//流量投放效果
class TikTokData extends Component {
  constructor() {
    super()
    this.formRef_search = React.createRef()
    this.queryFormRef = React.createRef()
    this.voucherFormRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "日期",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "来源",
          dataIndex: "advertSource",
          key: "advertSource",
          render: (_, render) => {
            return ["APP", "H5", "微信小程序", "抖音", "sigmod", "微博", "oppo", "小米", "vivo", "TEST" ][render.advertSource]
          }
        },
        {
          title: "激活用户",
          dataIndex: "activeCount",
          key: "activeCount",
        },
        {
          title: "当天注册用户",
          dataIndex: "registerTotal",
          key: "registerTotal",
        },
        {
          title: "累计注册用户",
          dataIndex: "registerCount",
          key: "registerCount",
        },
        {
          title: "累计付款用户",
          dataIndex: "payCount",
          key: "payCount",
        },
        {
          title: "用户累计付款金额",
          dataIndex: "registerPayPrice",
          key: "registerPayPrice",
          render: text => text && <React.$price price={text} />,
        },
        {
          title: "次日留存率",
          dataIndex: "nextDayRetention",
          key: "nextDayRetention",
        },
        {
          title: "7日留存率",
          dataIndex: "sevenDayRetention",
          key: "sevenDayRetention",
        },
        {
          title: "15日留存率",
          dataIndex: "fifteenDayRetention",
          key: "fifteenDayRetention",
        },
        {
          title: "30日留存率",
          dataIndex: "thirtiethDayRetention",
          key: "thirtiethDayRetention",
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10

      },
      total: 0,
      newColumns: [],
      form_show: true,
      searchOption: [
        {
          field: "advertSource",
          label: "来源",
          placeholder: "请选择",
          required: false,
          rules: [],
          type: "Select",
          options: [
            // { value: "", label: "全部" },
            // { value: "0", label: "APP" },
            // { value: "1", label: "H5" },
            // { value: "2", label: "微信小程序" },
            { value: "3", label: "抖音" },
            // { value: "4", label: "sigmod" },
            // { value: "5", label: "微博" },
            // { value: "6", label: "oppo" },
            // { value: "7", label: "小米" },
            // { value: "8", label: "vivo" },
            // { value: "9", label: "TEST" },
          ],
          defaultValue: "3",
        },
        { field: 'times', label: '激活时间', placeholder: '', required: false, rules: [], type: 'RangePicker', defaultValue: '' },
      ],
      queryForm: {advertSource: "3"},
    }
  }
  componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'tiktokData') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
  }
  getData(values) {
    console.log(values);
    let { pageNo, pageSize } = this.state.pageData
    if (values && !_.isEmpty(values.times)) {
      values.beginTime = getDateTime3(values.times[0])
      values.endTime = getDateTime3(values.times[1])
      delete (values.times)
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...this.state.queryForm, ...values }
    }, async () => {
      const params = {
        pageNo, pageSize, queryForm: this.state.queryForm
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'tiktokData',
          ...params
        }
      })
      let res = await apiGetThirdAdvertStatisticsPage({
        pageNo, pageSize, ...this.state.queryForm,
      })

      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount
        })
      }
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onReset() {
    this.setState({
      queryForm: {advertSource: "3"}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  onFormSearch(values) {
    console.log(values);
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  toExport = async () => {
    const { queryForm } = this.state
    console.log(queryForm);
    if (Object.keys(queryForm).includes("beginTime") && Object.keys(queryForm).includes("endTime")) {
      await apiGetThirdAdvertStatisticsExport({ ...queryForm }).then(res => {
        if (res.code === 0 && res.data) {
          let th_arr = [
            {
              title: '抖音数据',
              prop: '',
              children: [
                {
                  title: "日期",
                  prop: "createTime",
                },
                {
                  title: "来源",
                  prop: "advertSource",
                },
                {
                  title: "激活用户",
                  prop: "activeCount",
                },
                {
                  title: "当天注册用户",
                  prop: "registerCount",
                },
                {
                  title: "累计注册用户",
                  prop: "registerTotal",
                },
                {
                  title: "累计付款用户",
                  prop: "payCount",
                },
                {
                  title: "用户累计付款金额",
                  prop: "registerPayPrice",
                },
                {
                  title: "次日留存率",
                  prop: "nextDayRetention",
                },
                {
                  title: "7日留存率",
                  prop: "sevenDayRetention",
                },
                {
                  title: "15日留存率",
                  prop: "fifteenDayRetention",
                },
                {
                  title: "30日留存率",
                  prop: "thirtiethDayRetention",
                },
              ]
            },
          ]
          let tb_arr = []
          res.data.forEach((item, index) => {
            tb_arr.push({
              index: index + 1,
              createTime: item.createTime || '/',
              advertSource: ["APP", "H5", "微信小程序", "抖音", "sigmod", "微博", "oppo", "小米", "vivo", "TEST" ][item.advertSource] || '/',
              activeCount: item.activeCount || "0",
              registerCount: item.registerCount || '0',
              registerTotal: item.registerTotal || '0',
              payCount: item.payCount || '0',
              registerPayPrice: (item.registerPayPrice / 100).toFixed(2) || '/',
              nextDayRetention: item.nextDayRetention || '/',
              sevenDayRetention: item.sevenDayRetention || '/',
              fifteenDayRetention: item.fifteenDayRetention || '/',
              thirtiethDayRetention: item.thirtiethDayRetention || '/',
            })
          })
          exportSheetTable({ fileName: '抖音数据', tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false })
        }
      })
    } else {
      React.$message({
        type: 'error',
        content: "请选择日期"
      })
    }
  }
  render() {
    let { columns, dataSource, pageData, total, form_show, searchOption, newColumns } = this.state

    return (
      <div className="p-layout-box commodity-examine">
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} >
        </TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
          <TheButton size="middle" onClick={() => this.toExport()} type="default">导出</TheButton>
        </TheTableExtend>
        <TheTable
          scroll={{ x: "max-content", y: '63vh' }}
          columns={newColumns}
          dataSource={dataSource}
        />
        <ThePagination
          pageNo={pageData.pageNo}
          pageSize={pageData.pageSize}
          total={total}
          pageChange={this.pageChange}
        />

      </div>
    );
  }
}
export default TikTokData
